﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    xmlns:i="using:nRoute.Behaviors.Interactivity"
    xmlns:nBehaviors="using:nRoute.Behaviors" 
    xmlns:nTriggers="using:nRoute.Behaviors.Triggers" 
	xmlns:nComponents="using:nRoute.Components" 
	xmlns:nNavigation="using:nRoute.Navigation" 
    x:Class="nRoute.Themes.AboutError" 
	nComponents:Page.Title="Navigation Problem"
    d:DesignWidth="900" d:DesignHeight="600">

    <UserControl.Resources>
        <nComponents:ValueConverterRelay x:Key="TitleConverterRelay" />
        <nComponents:ValueConverterRelay x:Key="SubTitleConverterRelay" />
        <nComponents:ValueConverterRelay x:Key="ReturnUrlConverterRelay" />
        <nComponents:ValueConverterRelay x:Key="RetryUrlConverterRelay" />
        
        <Style x:Key="ErrorPageTextStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
            <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
            <Setter Property="TextTrimming" Value="WordEllipsis"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="Typography.StylisticSet20" Value="True"/>
            <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
            <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
        </Style>
    
        <Style x:Key="ErrorPageBaseTextStyle" TargetType="TextBlock" BasedOn="{StaticResource ErrorPageTextStyle}">
            <Setter Property="LineHeight" Value="20"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <!-- Properly align text along its baseline -->
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform X="-1" Y="4"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ErrorPageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource ErrorPageBaseTextStyle}">
            <Setter Property="FontSize" Value="56"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="LineHeight" Value="40"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform X="-2" Y="8"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ErrorPageSubErrorPageHeaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource ErrorPageBaseTextStyle}">
            <Setter Property="FontSize" Value="26.667"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="LineHeight" Value="30"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform X="-1" Y="6"/>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="ErrorPageBackButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="Width" Value="48"/>
            <Setter Property="Height" Value="48"/>
            <Setter Property="Margin" Value="36,0,36,36"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="56"/>
            <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
            <Setter Property="AutomationProperties.Name" Value="Back"/>
            <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid">
                            <Grid Margin="-1,-16,0,0">
                                <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" Foreground="Transparent"/>
                                <TextBlock x:Name="NormalGlyph" Text="&#xE071;" Foreground="{StaticResource BackButtonForegroundThemeBrush}"/>
                                <TextBlock x:Name="ArrowGlyph" Text="&#xE0A6;" Foreground="White" Opacity="0"/>
                            </Grid>

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="ArrowGlyph" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0"/>
                                            <DoubleAnimation Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="LightGray"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid Height="Auto" Width="Auto" Background="#0E6D38">

        <!-- Back Button -->
        <Button x:Name="NavigateBackText" Margin="30,50,0,0" Click="Link_NavigateBack" Style="{StaticResource ErrorPageBackButtonStyle}"
                VerticalAlignment="Top">
            <i:Interaction.Behaviors>
				<nBehaviors:NullValueVisibilityBehavior ValueBinding="{Binding DirectionalNavigationHandler, Mode=OneWay}"/>
			</i:Interaction.Behaviors>
        </Button>
        
        <!-- Header -->
        <TextBlock Margin="120,50,30,0" VerticalAlignment="Top" Style="{StaticResource ErrorPageHeaderTextStyle}"
            Text="{Binding ResponseStatus, Converter={StaticResource TitleConverterRelay}, Mode=OneWay}" TextWrapping="NoWrap"/>
        
        <!-- Sub-Header -->
        <TextBlock x:Name="SubTitleText" VerticalAlignment="Top" Style="{StaticResource ErrorPageSubErrorPageHeaderTextStyle}"
            Text="{Binding ResponseStatus, Converter={StaticResource SubTitleConverterRelay}, Mode=OneWay}"
            TextWrapping="NoWrap" Margin="120,100,30,0"/>
    
        <!-- Message Body -->
        <TextBlock x:Name="ErrorMessageText" TextWrapping="Wrap" TextTrimming="WordEllipsis" Style="{StaticResource ErrorPageTextStyle}"
                   Text="{Binding Error.Message, Mode=OneWay}" Margin="120,180,30,150">
        	<i:Interaction.Behaviors>
        		<nBehaviors:NullValueVisibilityBehavior ValueBinding="{Binding Error, Mode=OneWay}"/>
        	</i:Interaction.Behaviors>
        </TextBlock>

        <!-- Buttons -->
        <StackPanel Margin="120,30,30,80" Orientation="Horizontal" VerticalAlignment="Bottom">

            <!-- Return Back -->
            <Button x:Name="NavigateReturnText"  MinWidth="80" Margin="0,0,10,0" Click="Link_NavigateReturn" 
				Content="{Binding RefererRequest, Converter={StaticResource ReturnUrlConverterRelay}, Mode=OneWay}" >
                <i:Interaction.Behaviors>
                    <nBehaviors:NullValueVisibilityBehavior ValueBinding="{Binding RefererRequest, Mode=OneWay}"/>
                </i:Interaction.Behaviors>
            </Button>
        
            <!-- Retry -->
            <Button x:Name="NavigateRetryText" MinWidth="80" Margin="0,0,10,0" Click="Link_NavigateRetry" 
                Content="{Binding Request, Converter={StaticResource RetryUrlConverterRelay}, Mode=OneWay}" >
				<i:Interaction.Behaviors>
					<nBehaviors:NullValueVisibilityBehavior ValueBinding="{Binding Request, Mode=OneWay}"/>
				</i:Interaction.Behaviors>
            </Button>

            <!-- Error Details -->
            <Button x:Name="MoreInfoText" MinWidth="80" Margin="0,0,10,0" Content="Click for Error Details" >
        		<i:Interaction.Behaviors>
        			<nBehaviors:NullValueVisibilityBehavior ValueBinding="{Binding Error, Mode=OneWay}"/>
        		</i:Interaction.Behaviors>
        		<i:Interaction.Triggers>
                    <nTriggers:EventTrigger EventName="Click">
                    <nBehaviors:TargetedSetPropertyAction TargetName="MoreInfoPanel" PropertyName="Visibility" Value="Visible"/> 
                    </nTriggers:EventTrigger>
        		</i:Interaction.Triggers>
            </Button>
            
        </StackPanel>

        <Grid x:Name="MoreInfoPanel" Background="#FF292929" Width="300" HorizontalAlignment="Right" Visibility="Collapsed">
            
            <!-- Error Details -->
            <TextBox TextWrapping="Wrap" Text="{Binding Error, Mode=OneWay}" Margin="10,10,10,50" Background="Transparent" Foreground="White"
				AcceptsReturn="True" IsReadOnly="True" BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Visible" />
            
            <Button Margin="8" Content="Close Error Details" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" >
                <i:Interaction.Triggers>
                    <nTriggers:EventTrigger EventName="Click">
                        <nBehaviors:TargetedSetPropertyAction TargetName="MoreInfoPanel" PropertyName="Visibility" Value="Collapsed"/>
                    </nTriggers:EventTrigger>
                </i:Interaction.Triggers>
            </Button>
            
        </Grid>
        
    </Grid>
</UserControl>
